/**
 * @Date 2023-02-24 13:46:57
 * @Remark
 */

// react
import React, { useEffect, useState } from "react";
// lib

import { Modal, Form, InputNumber, Col, Input, Row, DatePicker, Select } from "antd";
// components & widget
// style
// config
import { MODULE_NAME } from "./config";
import { MODAL_STYLE } from "project/config";
import { INPUT_REQUIRED_RULE } from "project/validRules";
// script & methods & public
// store
import { observer } from "mobx-react";
import { state } from "./state";
import { addBook, getShelfByName } from "./controller";
import timeUtils from "utils/timeUtils";
import TextEditor from "components/TextEditor";
import dayjs from "dayjs";
// controller
// import { addMenu, updateMenu } from "./controller";
// interface
// 其它
dayjs.locale('zh-cn');
function EditModal() {
  const [form] = Form.useForm();
  const show = state.editModalShow;
  const title = `${MODULE_NAME}`;
  // 书架列表
  const [shelfList, setShelfList] = useState<ShelfDto[]>([]);
  // 书架搜索内容
  const [shelfSearch, setshelfSearch] = useState<string>();
  // 书架层数列表
  const [shelfLevels, setShelfLevels] = useState<number[]>([]);
  // 根据所选书架数据生成层数数据
  const onChange = (name: number) => {
    const maxL = shelfList.find(item => item.shelfId === name)?.maxLevel
    if (maxL && maxL > 0) {
      const numbers = new Array()
      for (let index = 0; index < maxL; index++) {
        numbers[index] = index + 1
      }
      setShelfLevels(numbers)
    }
  }
  const handleCancel = () => {
    state.editModal = false;
  };
  // 下拉选择搜索防抖
  useEffect(() => {
    const getData = setTimeout(() => {
      if (!shelfSearch) return
      getShelfByName(shelfSearch, setShelfList)
    }, 1000)
    return () => clearTimeout(getData)
  }, [shelfSearch])


  useEffect(() => {
    if (show) {
      form.resetFields();
    }
    if (state.editInfo) {
      const info = state.editInfo;
      form.setFieldsValue({
        ...info,
        publishDate:dayjs(info.publishDate,'YYYY-MM-DD')
      });
    }
    return () => {
      //
    };
  }, [form, show]);


  const handleOk = async () => {
    try {
      const result = await form.validateFields();
      if (result.publishDate) {
        result.publishDate = timeUtils.format(result.publishDate)
      }
      if (state.editInfo) {

      } else {
        addBook(result)
      }
    } catch (error) {
      //
    }
  };

  return (
    <Modal
      title={title}
      open={show}
      onCancel={handleCancel}
      onOk={handleOk}
      width={MODAL_STYLE.COL2}
      destroyOnClose
      maskClosable
      forceRender
      okButtonProps={{
        loading: state.editModalLoading,
      }}
    >
      <Form {...MODAL_STYLE.FORM_6_18} form={form}>
        {/* <Row gutter={MODAL_STYLE.FORM_ROW_GUTTER}> */}
        <Col span={24}>
          <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} name="title" label="图书名称" rules={[INPUT_REQUIRED_RULE, { type: "string", max: 15 }]}>
            <Input />
          </Form.Item>
        </Col>
        <Row>
          <Col span={12}>
            <Form.Item name="author" label="作者" rules={[INPUT_REQUIRED_RULE, { type: "string", max: 15 }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="isbn" label="ISBN" rules={[INPUT_REQUIRED_RULE, { type: "string", max: 20 }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item name="publisher" label="出版社" rules={[INPUT_REQUIRED_RULE, { type: "string", max: 20 }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="publishDate" label="出版日期" rules={[INPUT_REQUIRED_RULE]}>
              <DatePicker />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item name="price" label="定价(元)" rules={[INPUT_REQUIRED_RULE,]}>
              <InputNumber min={0.01} precision={2} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="categoryId" label="所属分类" rules={[INPUT_REQUIRED_RULE,]}>

              <Select >
                {state.getCategoryList().map(item => (
                  <Select.Option key={item.categoryId} value={item.categoryId}>
                    {item.categoryName}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item name="shelfId" label="所在书架" shouldUpdate rules={[INPUT_REQUIRED_RULE,]}>
              <Select filterOption={false} allowClear showSearch onSearch={(e) => setshelfSearch(e)} onChange={onChange}>
                {shelfList.map(item => (
                  <Select.Option key={item.shelfId} value={item.shelfId}>
                    {item.shelfName}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="shelfLevel" label="层数" rules={[INPUT_REQUIRED_RULE,]}>
              <Select onChange={onChange}>
                {shelfLevels.map(item => (
                  <Select.Option key={item} value={item}>
                    第{item}层
                  </Select.Option>
                ))}
              </Select>

            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              name="description"
              label="详情"
              rules={[INPUT_REQUIRED_RULE]}
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 21 }}
            >
              <TextEditor
              // initialValue={state.editInfo?.description}
              // disabled={disable}
              />
            </Form.Item>
          </Col>
        </Row>
        {/* </Row> */}
      </Form>
    </Modal>
  );
}

export default observer(EditModal);
